<template>
	<view>
		<!-- 自定义分类 -->
		<van-tree-select :items="AllcategoryInfo" :main-active-index.sync="active" @click-nav="clicknav">
			<template #content>
				<view class="category-container" :style="{'top':topHeight}">
					<view class="category-item" v-for="(item,i) in AllcategoryInfo[active].children">
						<view>
							<img :src="item.img">
							{{item.title}}
						</view>
					</view>
				</view>
			</template>

		</van-tree-select>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				active: 0,
				topHeight: "0px",
			};
		},
		computed: {
			...mapState("cata", ["AllcategoryInfo"])
		},

		methods: {
			...mapActions("cata", ["setCategory", "setCategoryInfo"]),

			//切换分类
			clicknav(index) {
				this.active = index.detail.index;
			}
		},
		//滑动页面
		onPageScroll(res) {

			this.topHeight = `${res.scrollTop}px`;
			this.active = (parseInt(res.scrollTop / 42))
		},
		onNavigationBarButtonTap(e) {
			if(e.index==1){
				uni.switchTab({
					url:"../home/home"
				})
			}
		},
		onLoad() {

		
			if (Object.keys(this.AllcategoryInfo).length == 0) {
				//获取所有分类
				uni.request({
						url: this.$apiServer+"api/getallcategory",
						success: (res) => {
				
							let allcategory = [];
							res.data.message.forEach((item, i) => {
								const t = {
									text: item.category
								}
								allcategory.push(t);
							})
				
							this.setCategory(allcategory)
						}
					}),
				
					//获取分类详细信息
					uni.request({
						url: this.$apiServer+"api/getallcategoryinfo",
						success: (res) => {
							this.setCategoryInfo(res.data.message)
						}
					})
				

			}


			//获取分类

			// 			uni.request({
			// 				url: "http://localhost:8083/api/getallcategory",
			// 				success: (res) => {

			// 					res.data.message.forEach((item,i)=>{
			// 						const t={
			// 							text:item.category
			// 						}
			// 						this.categoryList.push(t);
			// 					})
			// 				}
			// 			}),
			// 			uni.request({
			// 				url: "http://localhost:8083/api/getallcategoryinfo",
			// 				success: (res) => {
			// 					this.categoryList.forEach((item,i)=>{
			// 						var cate={text:item.text}
			// 						cate['children']=[]
			// 						res.data.message.forEach((item2,i2)=>{
			// 							if(item.text==item2.category){
			// 								let aa= {text:item2.title,
			// 										 img:item2.img};
			// 								cate['children'].push(aa)
			// 							}
			// 						})
			// 						this.category.push(cate)
			// 					})


			// 				}
			// 			})


		}
	};
</script>

<style lang="scss" scoped>
	.category-container {
		position: sticky;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 9px;

	}

	.category-item {
		position: relative;
		width: 33.333333333333336%;
		text-align: center;
		margin-top: 0.2rem;
		margin-bottom: 0.3rem;
		overflow: hidden;
		font-size: 15px;

		img {
			width: 4rem;
			height: 4rem;
			margin: 0 auto;
			background: #fff;
		}
	}
</style>
